<template>
  <div class="seacrch">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in topiceTypeList"
        :key="index"
        :label="item.name"
        :name="item.objectId"
      >
        <div class="topicContent">
          <TopicCard
            class="topicCard"
            v-for="(kyes, index) in topicList"
            :key="'topic' + index"
            :cardData="kyes"
          ></TopicCard>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 排序 -->
    <div class="sortArea">
      <div class="sortLeft">
        <div
          class="sortItem"
          v-for="(item, index) in sortData"
          :key="'sort' + index"
        >
          <div v-if="index !== 0" class="line"></div>
          <div
            :class="sortVal === item.value ? 'active' : ''"
            @click="changeSort(item.value)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="sortRgt">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import TopicCard from "@/components/TopicCard";
import { getTopicTypeList } from "@/api/topic";
export default {
  name: "Search",
  components: {
    TopicCard,
  },
  props: {
    // 专题类型
    topiceTypeList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 专题列表
    topicList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 排序
    sortData: {
      type: Array,
      default: function () {
        return [
          {
            name: "综合排序",
            value: "ALL",
          },
          {
            name: "最新",
            value: "CREATE_TIME",
          },
          {
            name: "最热",
            value: "JOINS",
          },
        ];
      },
    },
    sortVal: {
      type: String,
      default: "ALL",
    },

  },

  data() {
    return {
      // activeName: this.topiceTypeList[0].categoryId || '',
      activeName: "",
      courseList: [], // 课程列表
      name: "",


    };
  },
  methods: {
    // 获取专题课程
    async getTopicCourseList(id) {
      try {
        let params = {
          objectId: id,
        };
        const resData = await getTopicTypeList(params);
        this.courseList = resData || [];
        // if (this.topiceTypeList.length !==0) {
        //   this.$refs.search.activeName = this.topiceTypeList[0].categoryId
        // }
        console.log(resData);
      } catch (error) {
        console.error(error);
      }
    },


    handleClick(tab, event) {
      console.log(tab, event);
      this.$emit("changeType",tab.name)
    },

    changeSort(val) {
      console.log(val);
      this.$emit("changeSort", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.seacrch {
  position: relative;
  box-sizing: border-box;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  .topicContent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .topicCard {
      margin-bottom: 24px;
    }
  }

  .sortArea {
    position: absolute;
    right: 20px;
    top: 5px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sortLeft {
      display: flex;
      align-items: center;
      .sortItem {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: $text-color-secondary;
        cursor: pointer;

        .line {
          width: 1px;
          height: 20px;
          margin: 0 28px;
          background: #e2e2e2;
        }

        .active {
          color: $text-color-primary;
        }
      }
    }
    .sortRgt {
      font-size: 14px;
      font-weight: 400;
      color: $text-color-secondary;
    }
  }
}

::v-deep .el-tabs__header {
  box-sizing: border-box;
  // height:50px;
  padding: 16px 20px 0;
  background: #fff;
  border-bottom: none;
  border-radius: 8px;
  .el-tabs__nav-wrap::after {
    display: none !important;
  }
}
::v-deep .el-tabs__item {
  line-height: 22px;
  font-size: 20px;
  font-weight: 700;
}
</style>
